{% extends "./base.html" %}
{% block title %}
<title>考勤提交</title>
{% endblock %}
{% block style %}
<link rel="stylesheet" href="/static/assets/css/home.css">
{% endblock %}
{% block content %}
<div class="head">
  考勤提交（{{d}}）
</div>
<div class="title">
  请如实填写以下信息，如有疑问，请联系交付人员
</div>
<div class="user-info">
  <div class="ttx">个人信息</div>
  <div class="input">
    <div class="ttx">姓名</div>
    <div class="input">
      <el-input value="{{name}}" readonly placeholder="请输入姓名"></el-input>
    </div>
  </div>
  <div class="input">
    <div class="ttx">手机号</div>
    <div class="input">
      <el-input value="{{mobile}}" readonly placeholder="请输入手机号"></el-input>
    </div>
  </div>
  <div class="input">
    <div class="ttx">本月应出勤</div>
    <div class="input">
      <el-input value="{{day}}" readonly placeholder="请输入应出勤">
        <template slot="append">天</template>
      </el-input>
    </div>
  </div>
  <div class="ttx">本月实际出勤</div>
  <div class="input">
    <el-input v-model="form.day_act" readonly placeholder="请输入实际出勤">
      <template slot="append">天</template>
    </el-input>
  </div>
  <div class="ttx">
    年假
    <span class="addRow" @click="addItem('nj')"><i class="el-icon-circle-plus"></i></span>
  </div>
  <div class="wrap">
    {% if clocking %}
    {%for val in clocking %}
    {% if val.type === 'nj' %}
    <div id="deleteItem{{val.id}}">
      <el-date-picker value="{{val.d}}" :disabled="true" type="date" style="width:100%" placeholder="选择日期">
      </el-date-picker>
      <el-input value="{{val.t}}" :disabled="true" class="times" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input value="{{val.reason}}" :disabled="true" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px"
        @click="delItemId('{{val.type}}', '{{val.id}}', '{{val.t}}')" size="small" type="primary">删除</el-button>
    </div>
    {% endif %}
    {% endfor %}
    {% endif %}
    <div v-for="(item, i) in items.nj" :key="i">
      <el-date-picker v-model="item.d" type="date" style="width:100%" placeholder="选择日期">
      </el-date-picker>
      <el-input v-model="item.t" type="number" class="times" oninput="if(value>8)value=8" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input v-model="item.r" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px" @click="delItem('nj', i)" size="small" type="primary">删除
      </el-button>
    </div>
  </div>
  <div class="ttx">事假
    <span class="addRow" @click="addItem('sj')"><i class="el-icon-circle-plus"></i></span>
  </div>
  <div class="wrap">
    {% if clocking %}
    {%for val in clocking %}
    {% if val.type === 'sj' %}
    <div id="deleteItem{{val.id}}">
      <el-date-picker value="{{val.d}}" :disabled="true" type="date" style="width:100%" placeholder="选择日期">
      </el-date-picker>
      <el-input value="{{val.t}}" :disabled="true" class="times" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input value="{{val.reason}}" :disabled="true" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px"
        @click="delItemId('{{val.type}}', '{{val.id}}', '{{val.t}}')" size="small" type="primary">删除</el-button>
    </div>
    {% endif %}
    {% endfor %}
    {% endif %}
    <div v-for="(item, i) in items.sj" :key="i">
      <el-date-picker v-model="item.d" type="date" style="width:100%" placeholder="选择日期">
      </el-date-picker>
      <el-input v-model="item.t" class="times" oninput="if(value>8)value=8" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input v-model="item.r" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px" @click="delItem('sj', i)" size="small" type="primary">删除
      </el-button>
    </div>
  </div>
  <div class="ttx">
    病假
    <span class="addRow" @click="addItem('bj')"><i class="el-icon-circle-plus"></i></span>
  </div>
  <div class="wrap">
    {% if clocking %}
    {%for val in clocking %}
    {% if val.type === 'bj' %}
    <div id="deleteItem{{val.id}}">
      <el-date-picker value="{{val.d}}" :disabled="true" type="date" style="width:100%" placeholder="选择日期">
      </el-date-picker>
      <el-input value="{{val.t}}" :disabled="true" class="times" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input value="{{val.reason}}" :disabled="true" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px"
        @click="delItemId('{{val.type}}', '{{val.id}}', '{{val.t}}')" size="small" type="primary">删除</el-button>
    </div>
    {% endif %}
    {% endfor %}
    {% endif %}
    <div v-for="(item, i) in items.bj" :key="i">
      <el-date-picker v-model="item.d" type="date" style="width:100%" placeholder="选择日期">
      </el-date-picker>
      <el-input v-model="item.t" class="times" oninput="if(value>8)value=8" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input v-model="item.r" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px" @click="delItem('bj', i)" size="small" type="primary">删除
      </el-button>
    </div>
  </div>
  <div class="ttx">
    婚假
    <span class="addRow" @click="addItem('hj')"><i class="el-icon-circle-plus"></i></span>
  </div>
  <div class="wrap">
    {% if clocking %}
    {%for val in clocking %}
    {% if val.type === 'hj' %}
    <div id="deleteItem{{val.id}}">
      <el-date-picker value="{{val.d}}" :disabled="true" type="date" style="width:100%" placeholder="选择日期">
      </el-date-picker>
      <el-input value="{{val.t}}" :disabled="true" class="times" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input value="{{val.reason}}" :disabled="true" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px"
        @click="delItemId('{{val.type}}', '{{val.id}}', '{{val.t}}')" size="small" type="primary">删除</el-button>
    </div>
    {% endif %}
    {% endfor %}
    {% endif %}
    <div v-for="(item, i) in items.hj" :key="i">
      <el-date-picker v-model="item.d" type="date" style="width:100%" placeholder="选择日期">
      </el-date-picker>
      <el-input v-model="item.t" class="times" oninput="if(value>8)value=8" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input v-model="item.r" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px" @click="delItem('hj', i)" size="small" type="primary">删除
      </el-button>
    </div>
  </div>
  <div class="ttx">
    产假
    <span class="addRow" @click="addItem('cj')"><i class="el-icon-circle-plus"></i></span>
  </div>
  <div class="wrap">
    {% if clocking %}
    {%for val in clocking %}
    {% if val.type === 'cj' %}
    <div id="deleteItem{{val.id}}">
      <el-date-picker value="{{val.d}}" :disabled="true" type="date" style="width:100%" placeholder="选择日期">
      </el-date-picker>
      <el-input value="{{val.t}}" :disabled="true" class="times" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input value="{{val.reason}}" :disabled="true" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px"
        @click="delItemId('{{val.type}}', '{{val.id}}', '{{val.t}}')" size="small" type="primary">删除</el-button>
    </div>
    {% endif %}
    {% endfor %}
    {% endif %}
    <div v-for="(item, i) in items.cj" :key="i">
      <el-date-picker v-model="item.d" type="date" style="width:100%" placeholder="选择日期">
      </el-date-picker>
      <el-input v-model="item.t" class="times" oninput="if(value>8)value=8" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input v-model="item.r" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px" @click="delItem('cj', i)" size="small" type="primary">删除
      </el-button>
    </div>
  </div>
  <div class="ttx">
    产检假
    <span class="addRow" @click="addItem('cjj')"><i class="el-icon-circle-plus"></i></span>
  </div>
  <div class="wrap">
    {% if clocking %}
    {%for val in clocking %}
    {% if val.type === 'cjj' %}
    <div id="deleteItem{{val.id}}">
      <el-date-picker value="{{val.d}}" :disabled="true" type="date" style="width:100%" placeholder="选择日期">
      </el-date-picker>
      <el-input value="{{val.t}}" :disabled="true" class="times" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input value="{{val.reason}}" :disabled="true" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px"
        @click="delItemId('{{val.type}}', '{{val.id}}', '{{val.t}}')" size="small" type="primary">删除</el-button>
    </div>
    {% endif %}
    {% endfor %}
    {% endif %}
    <div v-for="(item, i) in items.cjj" :key="i">
      <el-date-picker v-model="item.d" type="date" style="width:100%" placeholder="选择日期">
      </el-date-picker>
      <el-input v-model="item.t" class="times" oninput="if(value>8)value=8" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input v-model="item.r" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px" @click="delItem('cjj', i)" size="small" type="primary">删除
      </el-button>
    </div>
  </div>
  <div class="ttx">
    育儿假
    <span class="addRow" @click="addItem('yerj')"><i class="el-icon-circle-plus"></i></span>
  </div>
  <div class="wrap">
    {% if clocking %}
    {%for val in clocking %}
    {% if val.type === 'yerj' %}
    <div id="deleteItem{{val.id}}">
      <el-date-picker value="{{val.d}}" :disabled="true" type="date" style="width:100%" placeholder="选择日期">
      </el-date-picker>
      <el-input value="{{val.t}}" :disabled="true" class="times" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input value="{{val.reason}}" :disabled="true" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px"
        @click="delItemId('{{val.type}}', '{{val.id}}', '{{val.t}}')" size="small" type="primary">删除</el-button>
    </div>
    {% endif %}
    {% endfor %}
    {% endif %}
    <div v-for="(item, i) in items.yerj" :key="i">
      <el-date-picker v-model="item.d" type="date" style="width:100%" placeholder="选择日期">
      </el-date-picker>
      <el-input v-model="item.t" class="times" oninput="if(value>8)value=8" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input v-model="item.r" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px" @click="delItem('yerj', i)" size="small" type="primary">
        删除</el-button>
    </div>
  </div>
  <div class="ttx">
    丧假
    <span class="addRow" @click="addItem('sangj')"><i class="el-icon-circle-plus"></i></span>
  </div>
  <div class="wrap">
    {% if clocking %}
    {%for val in clocking %}
    {% if val.type === 'sangj' %}
    <div id="deleteItem{{val.id}}">
      <el-date-picker value="{{val.d}}" :disabled="true" type="date" style="width:100%" placeholder="选择日期">
      </el-date-picker>
      <el-input value="{{val.t}}" :disabled="true" class="times" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input value="{{val.reason}}" :disabled="true" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px"
        @click="delItemId('{{val.type}}', '{{val.id}}', '{{val.t}}')" size="small" type="primary">删除</el-button>
    </div>
    {% endif %}
    {% endfor %}
    {% endif %}
    <div v-for="(item, i) in items.sangj" :key="i">
      <el-date-picker v-model="item.d" type="date" style="width:100%" placeholder="选择日期">
      </el-date-picker>
      <el-input v-model="item.t" class="times" oninput="if(value>8)value=8" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input v-model="item.r" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px" @click="delItem('sangj', i)" size="small" type="primary">
        删除</el-button>
    </div>
  </div>
  <div class="ttx">
    调休
    <span class="addRow" @click="addItem('tj')"><i class="el-icon-circle-plus"></i></span>
  </div>
  <div class="wrap">
    {% if clocking %}
    {%for val in clocking %}
    {% if val.type === 'tj' %}
    <div id="deleteItem{{val.id}}">
      <el-date-picker value="{{val.d}}" :disabled="true" type="date" style="width:100%" placeholder="选择日期">
      </el-date-picker>
      <el-input value="{{val.t}}" :disabled="true" class="times" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input value="{{val.reason}}" :disabled="true" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px"
        @click="delItemId('{{val.type}}', '{{val.id}}', '{{val.t}}')" size="small" type="primary">删除</el-button>
    </div>
    {% endif %}
    {% endfor %}
    {% endif %}
    <div v-for="(item, i) in items.tj" :key="i">
      <el-date-picker v-model="item.d" type="date" style="width:100%" placeholder="选择日期">
      </el-date-picker>
      <el-input v-model="item.t" class="times" oninput="if(value>8)value=8" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input v-model="item.r" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px" @click="delItem('tj', i)" size="small" type="primary">删除
      </el-button>
    </div>
  </div>
  <!-- <div class="ttx">
    加班餐补/打车费
    <span class="addRow" @click="addItem('fei')"><i class="el-icon-circle-plus"></i></span>
  </div>
  <div class="wrap">
    <div v-for="(item, i) in items.fei" :key="i">
      <el-date-picker
        v-model="item.d"
        type="date"
        style="width:100%"
        placeholder="选择日期">
      </el-date-picker>
      <el-input v-model="item.t" class="times" placeholder="请输入费用">
        <template slot="append">元</template>
      </el-input>
      <el-input v-model="item.r" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px" @click="delItem('fei', i)" size="small" type="primary">删除</el-button>
    </div>
  </div> -->
  <!-- <div class="ttx">备注</div>
  <div class="input">
    <el-input type="textarea" placeholder="请输入具体情况" v-model="remark" maxlength="100" rows="6" show-word-limit>
    </el-input>
  </div> -->
</div>

<!-- <div class="liuyan" style="margin-bottom: 0;">
  <div class="ttx">请描述问题具体情况</div>
</div>
<div class="content">
  <el-input type="textarea" placeholder="请输入具体情况" v-model="form.content" maxlength="100" rows="6" show-word-limit>
  </el-input>
</div> -->
<div class="yanzheng">
  <div>
    <div style="width: 160px; font-size: 1.7rem;">手机验证码：</div>
    <div class="yzm">
      <el-input type="text" placeholder="请输入验证码" v-model="form.smscode">
    </div>
  </div>
  <el-button @click="sendSms" id="codeBtn">发送</el-button>
</div>
<!-- <div class="chengnuo">
  <el-checkbox v-model="chengnuo">我承诺上述问题反馈属实，如有虚报，愿承担相应责任。</el-checkbox>
</div> -->
<div class="chengnuo" style="text-align: center;">
  <input type="submit" class="tijiao-an" @click="submit"></input>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/bignumber.js/9.1.1/bignumber.js"></script>
<script>
  new Vue({
    el: '#app',
    delimiters: ['<%', '%>'],
    data: function () {
      return {
        form: {
          day: 0,
          day_act: 0
        },
        items: {
          nj: [],
          sj: [],
          cj: [],
          cjj: [],
          hj: [],
          yerj: [],
          tj: [],
          bj: [],
          sangj: [],
          fei: [],
        },
        remark: '',
        id: null,
        project: '',
        deleteItem: []
      }
    },
    created(opt) {},
    mounted(opt) {
      if (window.location.search) {
        const str = window.location.search.split('?id=')[1]
        const arr = str.split('&p=')
        this.id = arr[0]
        this.project = arr[1]
      }
      this.day = '{{day}}'
      this.form.day_act = '{{day_act}}'
    },
    watch: {
      items: {
        handler(newVal, oldVal) {
          let nums = new BigNumber(0)
          for (const key in newVal) {
            if (newVal[key].length && key !== 'tj' && key !== 'fei') {
              for (const item of newVal[key]) {
                if (item.t || item.t === 0) {
                  const t = new BigNumber(item.t).div(8)
                  nums = nums.plus(t)
                }
              }
            }
          }
          this.form.day_act = new BigNumber(this.day).minus(nums).toString()
        },
        deep: true
      },
    },
    methods: {
      addItem(str) {
        this.items[str].push({
          d: null,
          t: '',
          r: ''
        })
      },
      delItem(str, index) {
        this.items[str].splice(index, 1)
      },
      delItemId(str, id, t) {
        let self = document.getElementById('deleteItem' + id)
        let parent = self.parentElement;
        let removed = parent.removeChild(self);
        this.deleteItem.push(id)

        const tt = new BigNumber(t).div(8)
        this.form.day_act = new BigNumber(this.form.day_act).plus(tt).toString()
      },
      selectXz(e) {
        this.form.region_2 = e
      },
      beforeAvatarUpload() {},
      handleAvatarSuccess(e) {
        this.form[e.data.name] = e.data.url
      },
      submit() {
        if (this.checkPhone() && this.id) {
          for (const key in this.items) {
            for (const item of this.items[key]) {
              if (!item.d || !item.t) {
                this.$message({
                  type: 'warning',
                  message: `请完善请假信息`
                });
                return
              }
            }
          }
          // this.items.staff_id = this.id
          // this.items.project = this.project
          this.$http.post('/index/clocking/submit', Object.assign({
            list: this.items
          }, {
            staff_id: this.id
          }, {
            project: this.project
          }, {
            remark: this.remark
          }, {
            deleteItem: this.deleteItem
          })).then((res) => {
            if (res.body.errno === 0) {
              this.$alert('提交成功', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                  location.reload()
                }
              });
            } else {
              this.$message({
                type: 'warning',
                message: res.body.errmsg
              });
            }
          }, () => {

          });
        }
      },
      sendSms() {
        const elId = document.getElementById('codeBtn')
        if (elId.innerHTML !== '发送' && elId.innerHTML !== '<!----><!----><span>发送</span>') {
          return
        }
        if (this.checkPhone()) {
          this.$http.get('/index/index/sendSms?phone=' + this.form.phone).then((res) => {
            if (res.body.errno === 0) {
              let codeText = 60
              this.timer = setInterval(() => {
                codeText--
                elId.innerHTML = codeText + 'S'
                if (codeText <= 0) {
                  clearInterval(this.timer)
                  elId.innerHTML = '发送'
                }
              }, 1000)
            }
          }, function () {

          });
        }
      },
      checkPhone() {
        // if(!this.form.moblie){
        //   this.$message({
        //     type: 'warning',
        //     message: `请填写手机号`
        //   });
        // 	return false
        // }
        // var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
        // if(!strTemp.test(this.form.phone)){
        //   this.$message({
        //     type: 'warning',
        //     message: `手机号不符合规则`
        //   });
        // 	return false
        // }
        return true
      },
      checkCode() {
        if (!this.form.idcard) {
          this.$message({
            type: 'warning',
            message: `请填写身份证号码`
          });
          return false
        }
        if (this.form.idcard.length !== 18) {
          this.$message({
            type: 'warning',
            message: `身份证号码不符合规则`
          });
          return false
        }
        return true
      },
    }
  })
  // $(document).ready(function(){
  //   $("input").focus(function(){
  //     $(this).addClass("focus");
  //   });
  //   $("input").blur(function(){
  //     $(this).removeClass("focus");
  //   });
  // })
</script>

{% endblock %}